<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="stylesheets/ss.css" rel="stylesheet">
    <script src="javascripts/jquery-1.11.3.js"></script>
    <script>
        $(function () {
            // 添加学生信息
            $("#btn").click(()=>{
                if($("#singName").val() === ""){
                    $("#singName").parent().next().html(' * 不能为空！');
                }else {
                    let studentInformation = {
                        singName:$("#singName").val(),
                        singer:$("#singer").val(),
                        singAlbum:$("#singAlbum").val(),
                        singType:$("#singType").val(),

                    }
                    $.get('/addInformation',{studentInformation},function (data) {
                        $(".bg").show().fadeTo(2000,.5);
                        $(".dialog").show().animate({top:50+"%"},2000);
                        $(".dialog").find("h1").html(data);
                    });
                }
                oLoad();
            });
            $("#singName").focus(function () {
                $(this).parent().next().html(" 请输入名称");
                $(this).parent().css({ color:'#666'});
            });
            $("#singName").blur(function () {
                $(this).parent().next().html(" ");
            });
            $("#btn01").click(function () {
                $(".bg").fadeTo(1,1).hide(1);
                $(".dialog").animate({top:-120+"px"},2000).hide(1);
            });
        });
        $(function () {
            oLoad();
        });
        function oLoad() {
            $("#tab tbody").html("");
            $.get('/findInformation',{},function (data) {
                $(data).each(function (i) {
                    // console.log(data[i]);
                    $("#tab tbody").append(
                        '<tr><td>'+ data[i].singName +'</td><td>'+ data[i].singer+'</td>' +
                        '<td>' + data[i].singAlbum + '</td><td>' + data[i].singType +'</td></tr>');
                });
            });
        }
    </script>
</head>
<body>
<div id="boxs1">
    <h2 class="title">歌曲管理-->添加歌曲信息</h2>
    <table cellspacing="0" class="table" width="98%">
        <colgroup>
            <col width="10%"/>
            <col width="25%"/>
            <col width="15%"/>
            <col width="10%"/>
            <col width="25%"/>
            <col width="15%"/>
        </colgroup>
        <tbody>
        <tr>
            <td>名称：</td>
            <td><input type="text" id="singName"></td>
            <td></td>
            <td>歌手：</td>
            <td><input type="text" id="singer"></td>
            <td></td>
        </tr>
        <tr>
            <td>专辑：</td>
            <td><input type="text" id="singAlbum"></td>
            <td></td>
            <td>类型：</td>
            <td><input type="text" id="singType"></td>
            <td></td>
        </tr>

        </tbody>
    </table>
    <div class="btn_box">
        <input type="button" value="提 交" class="btn01" id="btn">
        <input type="button" value="重 置" class="btn02">
    </div>
    <h2 class="title">歌曲管理-->显示歌曲信息</h2>
    <table cellspacing="0" class="table1" width="98%" id="tab">
        <thead>
        <tr>
            <th>名称</th>
            <th>歌手</th>
            <th>专辑</th>
            <th>类型</th>
        </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</div>
<div class="bg"></div>
<div class="dialog">
    <h1></h1>
    <button class="btn01" id="btn01">确定</button>

</div>
</body>
</html>
